<template>
    <div>
        <div class="mdui-container">
            <div class="mdui-row">
                <h2>{{data.title}}</h2>
                <div v-html="articleCSS"></div>
                <div v-html="data.body"></div>
            </div>
        </div>
        <div class="mdui-fab-wrapper" id="main-fab" mdui-fab="{trigger: 'hover'}">
            <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
                <i class="mdui-icon material-icons">add</i>
                <i class="mdui-icon mdui-fab-opened material-icons">add</i>
            </button>
            <div class="mdui-fab-dial">
                <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-teal" @click="goBack">
                    <i class="mdui-icon material-icons">arrow_back</i>
                </button>
            </div>
        </div>
    </div>
</template>
<script>
import $ from "../../libs/util.js";
export default {
  data() {
    return {
      data: {},
      articleCSS: "<link rel='stylesheet' href='"
    };
  },
  methods: {
    getArticle() {
      $.ajax.get("news/" + this.$route.params.id).then(res => {
        res.body = res.body.replace(/src="http/g, 'src="' + $.imgPath + "http");

        res.body = res.body.replace(
          /src="https/g,
          'src="' + $.imgPath + "https"
        );
        if (res.images) {
          res.images[0] = res.images[0].replace();
        }
        this.data = res;
        this.articleCSS = this.articleCSS + res.css + "'>";
      });
    },
    goBack(){
        this.$router.back(-1);
    }
  },
  watch: {
    $route: "getArticle"
  },
  mounted() {
    if (this.$route.params.id) {
      this.getArticle();
    } else console.log("no id");
  }
};
</script>
